<!--
 * @Description: 我的上传书籍列表
 * @Author: zhangweigang
 * @Date: 2021-02-14 20:08:05
 * @LastEditTime: 2021-04-05 12:29:32
 * @LastEditors: zhangweigang
-->
<template>
  <div>
    <Header></Header>
    <curr-locat title="我的共享"></curr-locat>
    <div class="contain">
      <el-row :gutter="24" type="flex" align="middle">
        <el-col :span="4">
          <el-input v-model="bookName" :clearable="clearable" placeholder="请输入书籍名称" @clear="contentClear"></el-input>
        </el-col>
        <el-col :span="2" align="center">
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-col>
        <el-col :span="18" align="right">
          <el-button type="success" @click="upLoadBook">书籍上传</el-button>
        </el-col>
      </el-row>
      <el-table class="pag" :data="listData" stripe border>
        <el-table-column label="书籍封面" header-align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.coverUrl"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="书籍名称" header-align="center">
          <template slot-scope="scope">
            <a :href="scope.row.bookUrl" target="_blank" class="a-text">{{ scope.row.name }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" header-align="center"></el-table-column>
        <el-table-column prop="createDate" width="180" label="上传时间" header-align="center"></el-table-column>
        <el-table-column label="是否审核" header-align="center">
          <template slot-scope="scope">
            <!-- 审核标识 1:已审核 2:未审核 3:审核不通过 -->
            <el-tag type="success" v-if="scope.row.isAudit == 1">已审核</el-tag>
            <el-tag type="danger" v-else-if="scope.row.isAudit == 2">未审核</el-tag>
            <el-tag type="warning" v-else>审核不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否共享" header-align="center">
          <template slot-scope="scope">
            <!-- 1:共享书籍 2:非共享书籍 -->
            <el-tag type="success" v-if="scope.row.isShare == 1">已共享</el-tag>
            <el-tag type="danger" v-else>未共享</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px" header-align="center">
          <template slot-scope="scope">
            <!-- 查看按钮  -->
            <el-button v-if="scope.row.isShare == 2" type="primary" size="mini" @click="addShare(scope.row)">添加共享</el-button>
            <el-button v-else type="warning" size="mini" @click="cancelShare(scope.row)">取消共享</el-button>
            <!-- 查看原因 -->
            <el-button type="danger" size="mini" @click="reviewResource(scope.row)">审核原因</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pag">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <Footer></Footer>
    <!-- 审核原因弹出层 -->
    <el-dialog title="审核原因" :visible.sync="reviewDialogVisible" width="50%">
      <!-- 内容主体区域 -->
      <div class="text-Souce">{{ resourceText }}</div>
    </el-dialog>
  </div>
</template>

<script>
import { getBookByName, getMyBookPagination, modifyShareStatus } from '../../network/product.js';
export default {
  name: 'ShareBook',
  data() {
    return {
      reviewDialogVisible: false,
      resourceText: '',
      clearable: true, // 是否显示清除按钮
      bookName: '',
      currentPage: 1,
      listData: [], // 书籍列表
      total: 0,
      // 默认分页参数
      pageNum: 1, // 当前页数
      pageSize: 10 // 每页显示多少条数据
    };
  },
  created() {
    // 书籍分页
    this.getPageData(this.pageNum, this.pageSize);
  },
  methods: {
    // 监听 pagesize 改变事件
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getPageData(this.pageNum, pageSize);
    },
    // 监听 页码值 改变事件
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getPageData(pageNum, this.pageSize);
    },
    /**
     * 书籍分页数据
     * @pageNum 当前页数
     * @pageSize 每页显示多少条数据
     */
    getPageData(pageNum, pageSize) {
      getMyBookPagination(pageNum, pageSize).then((res) => {
        if (res.data.code === 0) {
          this.total = res.data.total;
          this.listData = res.data.rows;
          console.log(res.data.rows, '数据');
        } else {
          this.$message({
            showClose: true,
            message: '获取失败，请联系管理员！',
            type: 'error',
            duration: 4000
          });
          return;
        }
      });
    },
    // 添加共享
    addShare(scope) {
      let addStatusInfo = {
        id: scope.id,
        isShare: 1,
        updateDate: '',
        uploadUserId: scope.uploadUserId
      };
      modifyShareStatus(addStatusInfo).then((res) => {
        if (res.data.code === 0) {
          console.log(res, '成功');
          this.$message({
            showClose: true,
            message: '添加共享成功！',
            type: 'success',
            duration: 4000
          });
          // 刷新
          this.getPageData(this.pageNum, this.pageSize);
        } else {
          this.$message({
            showClose: true,
            message: '共享失败，请联系管理员！',
            type: 'error',
            duration: 4000
          });
        }
      });
    },
    // 取消共享
    cancelShare(scope) {
      let shareStatusInfo = {
        id: scope.id,
        isShare: 2,
        updateDate: '',
        uploadUserId: scope.uploadUserId
      };
      modifyShareStatus(shareStatusInfo).then((res) => {
        if (res.data.code === 0) {
          console.log(res, '成功');
          this.$message({
            showClose: true,
            message: '取消共享成功！',
            type: 'success',
            duration: 4000
          });
          // 刷新
          this.getPageData(this.pageNum, this.pageSize);
        } else {
          this.$message({
            showClose: true,
            message: '取消失败，请联系管理员！',
            type: 'error',
            duration: 4000
          });
        }
      });
    },
    // 上传书籍
    upLoadBook() {
      this.$router.push('/myupload');
    },
    // 查询
    onSubmit() {
      let params = {
        name: this.bookName
      };
      getBookByName(params).then((res) => {
        if (res.data.code === 0) {
          this.total = res.data.total;
          this.listData = res.data.rows;
          this.$message.success('查询成功！');
        }
      });
    },
    contentClear() {
      this.getPageData(this.pageNum, this.pageSize);
    },
    // 审核原因
    reviewResource(scope) {
      this.resourceText = scope.auditContent || '书籍未审核！';
      this.reviewDialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.book-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  .left {
    // flex-direction: column;
    cursor: pointer;
    img {
      width: 100px;
    }
  }
  .right {
    padding-left: 15px;
  }
}
.a-text {
  text-decoration: underline;
  color: red;
}
.pag {
  margin-top: 20px;
}
.text-Souce {
  font-size: 16px;
}
</style>
